<template>
	<view class="patient-add-content">
		<view class="list">
			<view class="list-call">
				<view><text>姓名<text class="standard">*</text></text></view>
				<view class="list-fill uni-flex-item">
					<input class="list-input" type="text" placeholder-class="placeholderclass" placeholder="输入患者姓名"/>
				</view>
			</view>
			<view class="list-call">
				<view><text>性别</text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="genderIndex" :range="genderList" @change="bindPickerChange('0',$event)">
						<view>{{genderList[genderIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>年龄<text class="standard">*</text></text></view>
				<view class="list-fill uni-flex-item">
					<input class="list-input" type="text" placeholder-class="placeholderclass" placeholder="输入患者年龄"/>
				</view>
			</view>
			<view class="list-call">
				<view><text>电话<text class="standard">*</text></text></view>
				<view class="list-fill uni-flex-item">
					<input class="list-input" type="text" placeholder-class="placeholderclass" placeholder="输入患者电话"/>
				</view>
			</view>
			<view class="list-call">
				<view><text>状态<text class="standard">*</text></text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="stateIndex" :range="stateList" @change="bindPickerChange('1',$event)">
						<view>{{stateList[stateIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>预约项目<text class="standard">*</text></text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="appointmentIndex" :range="appointmentList" @change="bindPickerChange('2',$event)">
						<view>{{appointmentList[appointmentIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>预约时间<text class="standard">*</text></text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindPickerChange('99',$event)">
						<view>{{date}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>访问病种<text class="standard">*</text></text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="diseaseIndex" :range="diseaseList" @change="bindPickerChange('3',$event)">
						<view>{{diseaseList[diseaseIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>预约门诊<text class="standard">*</text></text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="outpatientIndex" :range="outpatientList" @change="bindPickerChange('4',$event)">
						<view>{{outpatientList[outpatientIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>一级渠道<text class="standard">*</text></text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="channelIndex" :range="channelList" @change="bindPickerChange('5',$event)">
						<view>{{channelList[channelIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>二级渠道<text class="standard">*</text></text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="channelIndex" :range="channelList" @change="bindPickerChange('5',$event)">
						<view>{{channelList[channelIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call">
				<view><text>三级渠道<text class="standard">*</text></text></view>
				<view class="list-fill uni-flex-item">
					<picker class="list-input" :value="channelIndex" :range="channelList" @change="bindPickerChange('5',$event)">
						<view>{{channelList[channelIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="list-call list-call-black">
				<view><text>客户详情<text class="standard">*</text></text></view>
				<view class="list-fill uni-flex-item">
					<textarea class="lins-textarea"  placeholder-style="font-size:14px;" placeholder="请输入客户详情"></textarea>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				genderIndex:0,
				genderList: ['请选择', '男', '女', '未知'],
				stateIndex:0,
				stateList: ['请选择', '待定', '跟进', '预约'],
				appointmentIndex:0,
				appointmentList: ['请选择', '种植', '正畸', '修复'],
				diseaseIndex:0,
				diseaseList: ['请选择', '种植', '美白', '牙周'],
				outpatientIndex:0,
				outpatientList: ['请选择', '徐东', '德米', '光谷'],
				channelIndex:0,
				channelList: ['请选择', '渠道', '网络', '企划'],
				date: currentDate
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindPickerChange(type,event){
				switch (type){
					case '0':
						this.genderIndex = event.target.value
						break;
					case '1':
						this.stateIndex = event.target.value
						break;
					case '2':
						this.appointmentIndex = event.target.value
						break;
					case '3':
						this.diseaseIndex = event.target.value
						break;
					case '4':
						this.outpatientIndex = event.target.value
						break;
					case '5':
						this.channelIndex = event.target.value
						break;
					case '99':
						this.date = event.target.value
						break;
					default:
						break;
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			onNavigationBarButtonTap(val) {
                if (val.index == 0) {
                    console.log(this.genderList[this.genderIndex]);
                }
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: white;
	}

	.list-call{
		display: flex;
		align-items: center;
		border-bottom: 1px solid #CCCCCC;
		margin: 0 2.5%;
		padding: 20rpx 10rpx;
		
		.standard{
			color: red;
			margin-left: 5rpx;
		}
		
		.list-input{
			text-align: right;
			padding-right: 15rpx;
		}
	}
	
	.list-call-black{
		display: block;
		border: none;
		
		.lins-textarea{
			width: 100%;
			height: 200rpx;
		}
	}
</style>
